<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      input {
        outline: none;
      }
    </style>
  </head>
  <body>
    用户名: <input type="text" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      // 获取元素
      const input = document.querySelector("input");
      //   定义一个正则
      let reg = /^[\w]{4,16}$/;

      input.onblur = async function () {
        let value = this.value;
        if (reg.test(value)) {
          try {
            const { data } = await axios.get(
              "http://localhost:3000/name/duplicate",
              {
                params: {
                  name: input.value,
                },
              }
            );
            console.log(data);
            if (data.success) {
              alert("用户名合法");
            } else {
              alert("用户名已存在");
            }
          } catch (e) {
            console.log(e);
          }
        }
      };
      // ? onblur
      // ? 先检测用户名是否符合要求 正则 数字字母下划线4到16位
      // ? 如果符合要求，发送请求到后端，用户名重名检测
      // ? /name/duplicate  method : get
      // ? 参数 是 name

      // ? 后端 : ['isen','lucy','jery'] 不在数组内的name就不算重名
      // ? 返回 response :
      // ? 如果重名 {success : false , msg:'用户名重名'}
      // ? 如果不重名 { success : true }
      // ? 在下方显示结果，如果重名，下方红色字
    </script>
  </body>
</html>
